<template>
	<view class="container">
		<view class="box">
			<view class="label">
				昵称
			</view>
			<view class="input">
				<input type="text" placeholder="输入昵称" v-model="userinfo.nickname" />
			</view>
		</view>
		<view @click="chooseAvatur()" class="box">
			<view class="label">
				头像
			</view>
			<view class="avatur">
				<image :src="userinfo.avatur"></image>
			</view>
		</view>
	</view>
	<view class="bottom">
		<view @click="save()" class="button">完成</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onBeforeMount} from "vue"
	import http from "@/utils/request.js"
	let userinfo=ref({})
	let ischange=ref(false)
	onBeforeMount(()=>{
		userinfo.value=uni.getStorageSync('userinfo')
	})
	
	function uploads(){
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
				url:'http://localhost:82/api/images/upload',
				filePath:userinfo.value.avatur,
				name:'file',
				header: { "Content-Type": "multipart/form-data" },
				formData:{
					'user':userinfo.value.user_id,
					'use':'avatur',
					'time':Date.now()
				},
				success(result){
					resolve(result)
				},
				fail(err){
					reject(err)
				}
			})
		})
	}
	function chooseAvatur(){
		uni.chooseImage({
			count:1,
			success(res){
				userinfo.value.avatur=res.tempFilePaths[0]
				ischange.value=true
			},
			fail(err){
				console.log(err)
			}
		})
	}
	function update(){
		let response=http.post('/user/updateuser',{avatur:userinfo.value.avatur,nickname:userinfo.value.nickname,user_id:userinfo.value.user_id})
		response.then((result)=>{
			if(result.data.code===200){
				uni.setStorageSync('userinfo',userinfo.value)
				uni.showToast({
					title:'保存成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
	function save(){
		if(ischange.value){
			uploads().then(res=>{
				userinfo.value.avatur=JSON.parse(res.data).imgUrl
				update()
			})
		}else{
			update()
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		
		.box{
			width: 90%;
			height: 120rpx;
			box-sizing: border-box;
			padding:0 30rpx 0 60rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.label{
				font-size: 32rpx;
				font-weight: 600;
				position: relative;
				margin-right: 30rpx;
				
				&::before{
					content: '';
					position: absolute;
					top:6rpx;
					border-radius: 20rpx;
					left: -30rpx;
					background-color: #ff8371;
					height: 30rpx;
					width: 12rpx;
				}
			}
			
			.input{
				flex-grow: 1;
			}
			
			.avatur{
				image{
					width: 60rpx;
					height: 60rpx;
					border-radius:50%;
				}
			}
		}
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fefbea;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
